<template>
  <div>
    <img src="../assets/navBg.f265937d.png" alt="" class="img-nav">
    <el-row style="color: white;height: 120px;padding: 0 50px" justify="space-between" type="flex" align="middle">
      <el-col :span="8">
        <el-col :span="3">
          <img src="../assets/logo.png" alt="" style="width: 40px" @click="toNav"/>
        </el-col>
        <el-col :span="4">
          <div style="width: 300px">
            <div style="font-size: 20px;font-weight: 300;width: 400px"> 微服务统一站点门户</div>
            <div style="font-weight: 100;font-size: 14px;margin-top: 10px">深化两个监督，构建两个体系，压实两个责任。</div>
          </div>
        </el-col>
      </el-col>
      <el-col :span="4">
        <el-row type="flex" align="middle" justify="end">
          Hi~ 欢迎<span style="color:#EA816A ">{{ $store.state.user.actualName }}</span>管理员!
          <el-dropdown size="medium" @command="handleCommand">
            <el-avatar style="margin-left: 10px"
                       src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="forgotPassword">忘记密码</el-dropdown-item>
              <el-dropdown-item divided command="quit">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-row>
      </el-col>
    </el-row>
    <el-dialog title="密码修改" :close-on-click-modal="false" :visible.sync="dialogShow" width="350px">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" style="margin-right: 30px">
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input type="password" v-model="form.oldPassword"/>
        </el-form-item>
        <el-form-item label="新密码" prop="password">
          <el-input type="password" v-model="form.password"/>
        </el-form-item>
        <el-form-item label="确认密码" prop="rePassword">
          <el-input type="password" v-model="form.rePassword"/>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="center">
        <el-button @click="dialogShow = false">关闭</el-button>
        <el-button type="primary" :loading="loading"
                   @click="submit()">确认
        </el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import service from "@/api/service";

export default {
  name: "blueNav",
  data() {
    return {
      loading: false,
      form: {},
      dialogShow: false,
      rules: {
        oldPassword: [{
          required: true, trigger: 'blur', message: '请输入旧密码'
        }],
        password: [
          {
            required: true, trigger: 'blur', message: '请输入密码'
          }, {
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请确认密码'));
              } else if (value !== this.form.rePassword) {
                callback(new Error('密码不一致'));
              } else {
                this.$refs['form'].clearValidate('rePassword')
                callback();
              }
            },
            required: true, trigger: 'blur'
          }],
        rePassword: [{
          required: true, trigger: 'blur', message: '请输入密码'
        }, {
          validator: (rule, value, callback) => {
            if (!value) {
              callback(new Error('请确认密码'));
            } else if (value !== this.form.password) {
              callback(new Error('密码不一致'));
            } else {
              this.$refs['form'].clearValidate('password')
              callback();
            }
          }, trigger: 'blur', required: true
        }]
      },
    }
  },
  created() {
    this.init()
  },
  methods: {
    toNav() {
      this.$router.push({path: '/home'})
    },
    handleCommand(command) {
      if ('quit' === command) {
        service.get('/small-service-auth/oauth/logout').then(res => {
          if (res.status === 200) {
            this.$router.push({path: '/'})
          }
        })
      } else if ('forgotPassword' === command) {
        this.dialogShow = true;
      }
    },
    submit() {
      service.get('/small-service-auth/au-user/changePassword', this.form).then(res => {
        if (res.status === 200) {
          this.$message.success(res.message)
          this.$router.push("/")
        } else {
          this.$message.error(res.message)
        }
      })
    },
    init() {
      service.get('/small-service-account/au-user/userDetailsRequest').then(res => {
        if (res.status === 200) {
          this.$store.state.user = res.data
        }
      })
      service.get('/small-service-account/au-dic/findList').then(res => {
        if (res.status === 200) {
          this.$store.state.dic = res.data
        }
      })
    }
  }
}
</script>

<style scoped>
.img-nav {
  width: 100vw;
  height: 180px;
  position: absolute;
  top: 0;
}

.my-text {
  background-color: #2A61DC;
  border-top-left-radius: 4px;
  color: white;
  font-size: 18px;
  font-weight: 200;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>